<template>
	<view class="orderManagementPage">
		<view class="suspension" @click="addEmployeeSuspension()">
			<image class="addIcon" src="../../static/honeIndex.png" mode=""></image>
		</view>
		<view class="orderManagementTop flex">
			<view class="search-content">

				<image class="search-img" src="../../static/会员卡yi/组合 405.png" mode=""></image>
				<input placeholder="请输入订单号,商品号" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
				<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
			</view>




		</view>
		<sunui-navbar :items="tabList" lineHeight="70rpx" :isCenter="true" :currentIndex="currentIndex" padding="10rpx"
			activeColor="rgb(255, 0, 0);" :size="100" activeLineBg="#ff0000 " textAlign="center" activeLineWidth="50%"
			activeDirection="center" activeLineHeight="6rpx" bgColor="#fff" :margin="10"
			@change="e=>getChange(e,tabList[e].id)"></sunui-navbar>


		<!-- 订单列表 -->
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list" :key="index">
				<view class="orderList" @click="orderDetial(item)">
					<view class="flex-between">
						<view class="flex">
							<view class="order">
								<text style="color: rgb(153, 153, 153);">订单号：{{item.sn_order}}</text>
							</view>
							<view class="copy flex" @click.stop="paste(item.sn_order)">
								<text>复制</text>
							</view>
						</view>
						<!-- 1 待支付 2 已支付 3带发货 ，4发货中 5 退货 6完成 -->
						<view class="sign flex">
							{{orderStatusFn(item.status)}}
						</view>
					</view>
					<view class="flex-end-top margin-top_30rpx">
						<view class="">
							<image class="orderImg" :src="item.host_img[0]" mode=""></image>
						</view>
						<view class="margin-left_16rpx flex-columns" style="width:514rpx;height: 180rpx;">
							<view class="font-overflow2" style="width:100%">
								{{item.goods_name}}


							</view>
							<view class="padding_10rpx_0 font-overflow" style="color: rgb(153, 153, 153);width:100%">
								<text >
									{{item.title}}</text>
								

							</view>
							<view class="flex-between">
								<view class="">
									已优惠:{{(Number(item.total_price)-Number(item.reality_amount)).toFixed(2)}}元
								</view>
								<view class="">
									数量：x{{item.number}}
								</view>
							</view>
						</view>
					</view>
					<view class="flex-between margin-top_30rpx">
						<view class="">
							<text class="font-weight_bold" style="color: rgb(255, 59, 59);">
							</text>
						</view>
						<view class="">
							<text>实付款：<text class="font-weight_bold">{{item.reality_amount}}元</text></text>
						</view>
					</view>

					<view class="flex-end margin-top_30rpx" v-if="item.status==1">

						<!-- <view class="modifyPrice flex margin-right_30rpx" @click.stop="priceFn()">
							查看详情
						</view> -->
						<view class="modifyPrice flex" @click.stop="waitPay(item)">
							立即支付
						</view>
						<view class="modifyAddress flex margin-left_10rpx" @click.stop="cancelOrderFn(item)">
							取消订单
						</view>
					</view>
					<view class="flex-end margin-top_30rpx" v-if="item.status==2||item.status==3">
						<view class="modifyAddress flex margin-right_30rpx" @click.stop="applyRefund(item)">
							申请退款
						</view>

					</view>
					<view class="flex-end margin-top_30rpx" v-if="item.status==4">
						<view class="modifyAddress flex margin-right_30rpx" @click.stop="applyRefund(item)">
							申请退款
						</view>
						<view class="modifyPrice flex" @click.stop="confirmOrderFn(item)">
							{{ item.take_over_way==1 ?'查看核销':'确定收货'}}
						</view>
					</view>
					<!-- <view class="flex-end margin-top_30rpx" v-if="item.status==6">
						<view class="modifyPrice flex margin-right_30rpx" @click.stop="priceFn()">
							删除订单
						</view>


					</view> -->
				</view>
			</block>
		</mescroll-body>
		<!-- 发货物流 -->
		<sunui-popup ref="shippingLogisticsPop">
			<template v-slot:content>

				<view class="flex font-weight_bold padding20" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					发货物流
				</view>
				<view class="flex-between padding_30rpx_0" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<view class="">
						选择地区
					</view>
					<view class="">
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
				<view class=" padding_20rpx_0 " style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<view class="">
						<input class="uni-input" v-model="changeValue" placeholder="选择单号" />
					</view>
				</view>


				<view class="modifyBtn flex">
					确定
				</view>
			</template>
		</sunui-popup>
		<!-- 修改地址 -->
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="flex font-weight_bold padding20" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					修改地址
				</view>
				<view class="flex padding_20rpx_0 " style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<view class="">
						<input class="uni-input" v-model="changeValue" placeholder="姓名" />
					</view>
					<view class="borderLeft">

					</view>
					<view class="margin-left_20rpx">

						<input class="uni-input " v-model="changeValue" placeholder="电话" />
					</view>
				</view>
				<view class="flex-between padding_30rpx_0" style="border-bottom: 2rpx solid rgb(230, 230, 230);">
					<view class="">
						选择地区
					</view>
					<view class="">
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
				<view class="margin-top_20rpx">
					<view class="uni-textarea">
						<textarea v-model="feedbackContent" placeholder-style="color:#999;" :maxlength="150"
							placeholder="详情地址 (如街道小区 乡镇 村)" />
					</view>
				</view>
				<view class="modifyBtn flex">
					确定修改
				</view>
			</template>
		</sunui-popup>
		<sunui-popup ref="popinvoice">
			<template v-slot:content>
				<view class="popWriteOffCode">
					<!-- 关闭按钮进行定位 -->
					<uni-icons @click='closeWriteOff' class="uniIcon" type="clear" size="25" style="color: #07070791;">
					</uni-icons>
					<!-- 核销码 -->
					<view class="WriteOffTop">
						<text class="WriteOffCodeText">温馨提示</text>
						<text class="writeWriteOff">请使用商家端输入下方六位数进行核销
						</text>
						<!-- 输入核销码 -->
						<view class="WriteOffCode">
							<block v-for="(item,i) in rand_codeList" :key="i"><text class="font40">{{item}}</text>
							</block>

						</view>
					</view>
					<view class="effectTime">生成时间:{{create_time}}</view>

				</view>
			</template>
		</sunui-popup>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改次数" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		components: {

		},

		data() {
			return {
				tabIndex: 4,
				searchVal: '',
				currentIndex: 0,
				tabList: [{
						name: '全部',
						id: '' //null
					}, {
						name: '待付款',
						id: '1' //null
					}, {
						name: '待发货',
						id: '3' //null
					},

					{
						name: '待收货',
						id: '4' //null
					},
					{
						name: '退款中',
						id: '5' //null
					},
					{
						name: '已完成',
						id: '6' //null
					},
					{
						name: '已退款',
						id: '7' //null
					},
					{
						name: '已取消',
						id: '8' //null
					}
				],
				changeValue: '',
				feedbackContent: '',
				downOption: {
					auto: true
				},
				// 有效时间
				create_time: '',
				rand_codeList: [],
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				list: [],
				token: uni.getStorageSync('login').token,
				statusIndex: ''
			}
		},
		onLoad(options) {
			// 判断是否为{}对象
			if (Object.keys(options).length) {
				console.log(options)
				// this.currentIndex = Number(options.currentIndex)
				if(!(options.currentIndex=='1')){
					this.getChange(Number(options.currentIndex),(Number(options.currentIndex)+1).toString())
				}else{
					this.getChange(Number(options.currentIndex),(Number(options.currentIndex)).toString())
				}
			}
		},
		onShow() {
			this.$at.releaseKey('submit');
			this.$at.releaseKey('submitWaitPay');
			this.$at.releaseKey('submitAll');
			this.mescroll?.resetUpScroll();
		},
		computed: {
			// 订单状态
			orderStatusFn: function() {
				return function(status) {

					let orderStatus = '';
					// status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
					orderStatus =
						status == 0 ? '全部' : status == 1 ? '待付款' : status == 2 ? '已支付' : status == 3 ? '待发货' :
						status == 4 ? '待收货' : status == 5 ? '退款中' : status == 6 ? '已完成' : status == 7 ? '已退款' :
						'已取消';
					return orderStatus;
				};
			},
		},
		methods: {
			// 申请退款
			async applyRefund(item) {
				uni.showModal({
					title: '提示',
					content: '是否需要申请退款',
					success: async (res) => {
						if (res.confirm) {
							this.$at.uniDoFunc({
								key: 'submitAll',
								success: async () => {
									this.$at.lockKey('submitAll');
							
									const result = await this.$http.post({
										url: this.$api.applyReturns,
										data: {
											id: item.id
							
										},
										headers: {
											'Authorization': `Bearer ${this.token}`
										}
							
									})
									if (result.code == 0) {
										this.$sun.toast(result.msg, 'none')
										this.$at.releaseKey('submitAll');
										setTimeout(()=>{
											this.getChange(4,'5')
										},500)
							
									}
							
								}
							});
						} else if (res.cancel) {
				
						}
					}
				});
			


			},
			addEmployeeSuspension() {
				this.$sun.navRe('/pages/firstPage/firstPage', {
					currentIndex: 0
				})
			},
			changeInput(e) {
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.goodsOrderList,
					data: {
						page: scroll.num,
						limit: 10,
						status: this.statusIndex,
						order_name: this.searchVal

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (result.code == 0) {
					// console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count,
						10));
					if (scroll.num == 1) this.list = [];
					result.data.list.forEach((item) => {
						// console.log(item)
						item.host_img = item.host_img.split(',').map((item) => item.trim());
					})
					this.list = this.list.concat(result.data.list);

					// console.log('this.list', this.list, this.list.length);
				}
			},
			getChange(index, e) {
				console.log(index, e)

				this.currentIndex = index
				this.statusIndex = Number(e)
				this.mescroll?.resetUpScroll();
			},
			// 修改地址
			addressFn() {
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:642rpx;border-radius:10rpx;padding:30rpx;',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});
			},
			// 待支付
			waitPay(item) {
				uni.showModal({
					title: '提示',
					content: '是否需要立即支付',
					success: async (res) => {
						if (res.confirm) {

							this.$at.uniDoFunc({
								key: 'submitWaitPay',
								success: async () => {
									this.$at.lockKey('submitWaitPay');

									const result = await this.$http.post({
										url: this.$api
											.payGoodsOrder,
										data: {
											id: item.id

										},
										headers: {
											'Authorization': `Bearer ${this.token}`
										}

									})
									if (result.code == 0) {
										this.$at.releaseKey('submitWaitPay');


										let pay = result.data

										await this.$wx.config({
											debug: false,
											appId: pay.appid,
											timestamp: pay.timeStamp,
											nonceStr: pay.nonceStr,
											paySign: pay.paySign,
											jsApiList: ['chooseWXPay']
										});
										await this.$wx.chooseWXPay({
											timestamp: pay.timeStamp,
											nonceStr: pay.nonceStr,
											package: pay.package,
											signType: pay.signType,
											paySign: pay.paySign,
											appId: pay.appId,

											success: async res => {
												this.$at.releaseKey('submitWaitPay');
												this.isSuccess = true;
												this.$sun.toast('进入支付成功111');
												console.log('进入支付成功2222222', res);
												// 跳页面 1 自提 2下单
												if (item.take_over_way == 2) {
													this.getChange(2,'3')
													
												} else {
													this.getChange(3,'4')
													
												}

												// this.$sun.navRe('/pages/user/order/order', {
												// 	id: 1
												// });
												// 后台修改状态，则不需要重复调用接口
												// this.wxOrder();
											},
											fail: async err => {

												this.$sun.toast('取消了支付');
												this.$at.releaseKey('submitWaitPay');
												this.$sun.navRe(
													'/pages/user/order/order', {
														id: 1
													});
											},
											complete: async res => {
												if (this.isSuccess == true) {
													console.log('进入支付成功回调===========',
														res);
													this.$at.releaseKey(
														'submitWaitPay');
													// this.$sun.toast('进入支付成功回调'+res);
												} else {
													this.$sun.toast('取消了支付');
													this.$at.releaseKey(
														'submitWaitPay');

												}
												console.log('进入测试回调===========', res);
											}
										});
										console.log(result)

										this.$sun.toast(result.msg, 'none')
									} else {
										this.$at.releaseKey('submitWaitPay');
										this.$sun.toast(result.msg, 'none')
									}



								}
							});
						} else if (res.cancel) {

						}
					}
				});
			},
			// 取消订单
			cancelOrderFn(item) {
				uni.showModal({
					title: '提示',
					content: '是否需要取消该订单',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$http.post({
								url: this.$api
									.cancelOrder,
								data: {
									id: item.id

								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})
							if (result.code == 0) {


								this.$sun.toast(result.msg, 'none')

								this.getChange(7,'8')
								
							} else {

								this.$sun.toast(result.msg, 'none')
							}
							// 			this.$at.uniDoFunc({
							// 				key: 'submitWaitPay',
							// 				success: async () => {
							// 					this.$at.lockKey('submitWaitPay');


							// this.$at.releaseKey('submitWaitPay');


							// 				}
							// 			});
						} else if (res.cancel) {

						}
					}
				});
			},
			// 修改物流
			shippingLogisticsFn() {
				this.$refs.shippingLogisticsPop.show({
					style: 'background-color:#fff;width:642rpx;border-radius:10rpx;padding:30rpx;',
					bottomClose: false,
					shadeClose: true,
					topclose: true
				});
			},
			// 关闭核销
			closeWriteOff() {
				this.$refs.popinvoice.close()
			},
			// 确定收货
			async confirmOrderFn(item) {
				if (item.take_over_way == 1) {
					this.create_time = item.create_time
					var lowerCaseStr = item.rand_code.toLowerCase(); // 将字符串转换为小写
					var charArray = lowerCaseStr.split('');
					this.rand_codeList = charArray
					this.$refs.popinvoice.show({

						anim: 'center',
						shadeClose: false, //false使用户不能点击其它关闭页面
						topclose: false
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '是否确定要收货',
						success: async (res) => {
							if (res.confirm) {

								this.$at.uniDoFunc({
									key: 'submit',
									success: async () => {
										this.$at.lockKey('submit');

										const result = await this.$http.post({
											url: this.$api
												.confirmOrder,
											data: {
												id: item.id

											},
											headers: {
												'Authorization': `Bearer ${this.token}`
											}

										})
										if (result.code == 0) {
											this.$at.releaseKey('submit');
											this.mescroll?.resetUpScroll();
											this.$sun.toast(result.msg, 'none')
										} else {
											this.mescroll?.resetUpScroll();
											this.$at.releaseKey('submit');
											this.$sun.toast(result.msg, 'none')
										}



									}
								});
							} else if (res.cancel) {

							}
						}
					});
				}








			},
			// 复制订单号
			paste(orderNumber) {
				uni.setClipboardData({
					data: orderNumber
				});
			},
			priceFn() {
				// 修改价格
				this.$refs.inputDialog.open()
			},
			orderDetial(item) {
				console.log(item)
				this.$sun.navGo('/pages/shop/pendingPaymentPage/pendingPaymentPage', {
					...item
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.borderLeft {
		border: 2rpx solid rgb(230, 230, 230);
		height: 58rpx;
		width: 0;
	}

	.modifyBtn {
		margin-top: 50rpx;
		color: rgb(255, 255, 255);
		height: 96rpx;
		border-radius: 96rpx;

		background: rgb(255, 0, 0);
	}

	// 显示核销码

	.popWriteOffCode {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 672rpx;
		height: 480rpx;
		border-radius: 20rpx !important;
		flex-shrink: 0;
		background-color: #FFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 48rpx 40rpx 52rpx 40rpx;

		.WriteOffTop {
			display: flex;
			flex-direction: column;
			align-items: center;

			.WriteOffCodeText {
				color: #333;
				font-size: 36rpx;
				font-weight: 700;
				margin-bottom: 40rpx;
			}

			.writeWriteOff {
				color: #999;
				font-size: 28rpx;
				margin-bottom: 72rpx;
			}

			.WriteOffCode {
				color: #000;
				font-size: 100rpx;
				width: 346rpx;
				;
				display: flex;
				justify-content: space-between;
				font-weight: 700;
				margin-bottom: 56rpx;
			}
		}

		.effectTime {

			color: #999;
			font-size: 28rpx;
		}

		.uniIcon {
			position: absolute;
			top: 16rpx;
			right: 20rpx;
		}

		.sureWriteOff {
			margin-top: 84rpx;
			border-radius: 20rpx;
			background: #0C91F3;
			box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(12, 145, 243, 0.44);
			width: 624rpx;
			height: 100rpx;
			color: #FFF;
			font-size: 32rpx;
			text-align: center;
			line-height: 100rpx;
		}


	}

	.orderManagementPage {
		.suspension {
			position: fixed;
			left: 0rpx;
			width: 80rpx;
			bottom: 500rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #fff;
			text-align: center;
			line-height: 100rpx;
			z-index: 999;
			filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.15));

			.addIcon {

				width: 40rpx;
				height: 40rpx;
			}
		}

		.orderManagementTop {

			background: rgb(255, 255, 255);

			padding: 34rpx;

			// border-radius: 130rpx;
			.timeImg {
				width: 40rpx;
				height: 40rpx;
				margin-left: 5rpx;
				margin-right: 15rpx;
			}

			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				// width: 446rpx;
				height: 88rpx;
				margin-right: 24rpx;
				background: rgb(246, 248, 255);
				;
				border-radius: 84rpx;
				width: 100%;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}

			}
		}

		.orderList {
			margin-top: 20rpx;
			padding: 20rpx;

			background: rgb(255, 255, 255);

			.orderDetail {
				padding: 20rpx;

				background: rgb(243, 248, 255);

				.userImg {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;

				}

			}

			.modifyAddress {
				width: 156rpx;
				height: 64rpx;
				box-sizing: content-box;
				border: 1px solid rgb(228, 227, 227);
				border-radius: 30px;
				color: rgb(51, 51, 51);
				background: rgb(244, 243, 243);
			}

			.modifyPrice {
				width: 156rpx;
				height: 64rpx;
				border-radius: 60rpx;
				color: rgb(255, 255, 255);
				background: rgb(255, 0, 0);
				;
			}

			.orderImg {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;


			}

			.copy {
				box-sizing: content-box;
				color: rgb(190, 190, 190);
				border: 2rpx solid rgb(190, 190, 190);
				width: 70rpx;
				height: 33rpx;
				margin-left: 10rpx;

			}

			.sign {
				border-radius: 40rpx 0rpx 0rpx 40rpx;
				width: 112rpx;
				height: 46rpx;
				color: rgb(255, 255, 255);
				margin-right: -20rpx;
				// margin-top: -20rpx;
				font-size: 28rpx;
				font-weight: 400;
				background: rgb(255, 0, 0);
				;
			}
		}
	}

	page {
		background: #f6f6f6;
	}
</style>